
const path=require('path')

/*
* 1.plugin是什么？
       - plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
       - webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
  2.loader和plugin区别
       - loader主要用于转换某些类型的模块，它是一个转换器。
       - plugin是插件，它是对webpack本身的扩展，是一个扩展器。
  3.plugin的使用过程：
       - 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
       - 步骤二：在webpack.config.js中的plugins中配置插件。
* */

/*
*    1.使用BannerPlugin插件
*        - 引入webpack包
*            const webpack =require('webpack')
*        - 配置插件
*           plugins:[
              new webpack.BannerPlugin('最终版权归111所有'),
            ]



      2.uglifyjs-webpack-plugin插件：用于对打包的js文件进行压缩
        - 运行 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
        - 引入uglifyjs-webpack-plugin包
            const UglifyJsPlugin=require('uglifyjs-webpack-plugin')
        - 配置插件
            plugins:[
              new UglifyJsPlugin()
             ]
* */

/*
*    搭建本地服务器：
*      - webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，
*          不用每次修改代码后，都要执行npm run build，就可以让浏览器自动刷新显示我们修改后的结果。
*          但它是先放在内存里的，等我们彻底修改好了代码，最后执行一下npm run build，它才会真正刻进磁盘里
       - 不过它是一个单独的模块，在webpack中使用之前需要先安装它
           npm install webpack-dev-server@2.9.1 --save-dev
       - devServer也是作为webpack中的一个选项，选项本身可以设置如下属性：
            contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
            port：端口号
            inline：页面实时刷新
            historyApiFallback：在SPA页面中，依赖HTML5的history模式
       - webpack.config.js配置
            devServer：{
              contentBase：'./dist',
                inline:true
            * }
       - 我们可以再配置另外一个scripts：
            --open参数表示直接打开浏览器
       - 把本地服务跑起来：因为我们是局部安装的，不是全局安装的
       *   方法一：先进入node_modules/.bin文件夹  再运行webpack-dev-server
       *          运行：node_modules\.bin\webpack-dev-server
       *   方法二：在webpack.json文件里 加入： "dev":"webpack-dev-server --open"
       *          运行： npm run dev


* */
// 步骤一：引入webpack包
const webpack =require('webpack')
// 引入html-webpack-plugin插件包
const HtmlWebpackPlugin=require('html-webpack-plugin')
//引入uglifyjs-webpack-plugin包
const UglifyJsPlugin=require('uglifyjs-webpack-plugin')


module.exports={
  entry:'./src/main.js',
  output:{
  //  path模块有一个resolve函数，可以用来拼接两个路径
    // _dirname：是node里自带的全局变量，里面保存的是当前webpack.config.js文件的路径
    // (__dirname,'dist')是一个绝对路径
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js',
    // 默认情况下，webpack会将生成的路径直接返回给使用者，但我们程序是打包在dist文件夹下的，
    // 所以这里我们需要在路径下再添加一个dist/ , 新版本不需要
    // publicPath:'dist/'
  },
  module:{
    rules: [
      {
        //  /\.css$/i ： 正则表达式  匹配以.css结尾的文件
        test: /\.css$/i,
        // css-loader只负责将我们css文件进行加载，不负责解析，也不会将我们css中写的东西放到HTML里面将它生效
        // style-loader 将模块导出的内容作为样式并添加到 DOM 中
        // 使用多个loader时，是从右向左读
        use:  ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 以字节为单位指定文件的最大大小,我们test.png 49.61kb=406405.12bit
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式，直接用url-loader加载
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 130000,
              // img：文件要打包到的文件夹    name：获取图片原来的名字，放在该位置
              // hash:8 自动生成8位的hash值，目的是防止名字重复
              // ext：使用图片原理的扩展名
              // name:'img/[name].[hash:8].[ext]'   新版本不需要
            },
          },
        ],
      },
      {
        test: /\.js$/,
        // exclude：排除， node_modules或bower_components里的es6代码不需要转换
        // node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // 配置
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use: ['vue-loader']
      }
    ],
  },
  resolve:{
    // extensions:解决扩展名，为了可以省略不写扩展名
    extensions:['.js','.css','.vue'],
    // alias:别名
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    //步骤二：配置插件    BannerPlugin：属于webpack自带的插件，为打包的文件添加版权声明
    new webpack.BannerPlugin('最终版权归111所有'),
    // 配置htmlWebpackPlugin插件   用于打包HTML的插件
    new HtmlWebpackPlugin({
      //这里的template表示根据index.html模板来打包生成新的index.html
      template:'index.html'
    }),
    // 开发阶段不用压缩丑化，不适合调式。最后发布的时候再使用
    // new UglifyJsPlugin()
  ],
  // 本地服务开发阶段使用，发布的时候不需要再删除
  devServer:{
    contentBase:'./dist',
    inline:true
  }
}


